<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .box {
        width: 500px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
        margin: auto;
        overflow: hidden;
        cursor: pointer;
    }

    .box ul,
    .box ol {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .box ul li {
        width: 500px;
        height: 400px;
        display: none;
    }

    .box ul li img {
        width: 500px;
        height: 400px;
    }

    .box ol {
        width: 120px;
        position: absolute;
        left: 50%;
        margin-left: -40px;
        bottom: 20px;
        height: 20px;
        background: #fff;
        display: flex;
        justify-content: space-evenly;
        padding: 10px 0;
        border-radius: 20px;
    }

    .box ol li {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #f00;
        border: 1px solid #999;
    }

    .box ol li.current {
        background: #00f;
    }

    .box ul li.current {
        display: block;
    }

    .box .left,
    .box .right {
        position: absolute;
        top: 50%;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        background: #ccc;
        text-align: center;
        line-height: 30px;
        text-decoration: none;
        font-weight: bold;
        color: #fff;
    }

    .left {
        left: 0;
    }

    .right {
        right: 0;
    }
</style>

<body>
    <div class="box">
        <ul>
            <li class="current"><img src="1 .jpg" alt=""></li><li><img src="2.jpg" alt=""></li><li><img src="3.jpg" alt=""></li><li><img src="4.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="current"></li><li></li><li></li><li></li>
        </ol>
        <a href="javascript:;" class="left">&lt;</a>
        <a href="javascript:;" class="right">&gt;</a>
    </div>
</body>
<script type="text/javascript">
/*
        实现功能
        1、自动切换图片 保证小圆点跟随
        2、上一张下一张点击切换图片  小圆点也需要跟随
        3、点击小圆点 切换到对应的图片
    */
    var imgDom = document.querySelectorAll('ul>li');
    var liDom = document.querySelectorAll('ol>li');
    // fn(0);
  /*   function fn(count) {
        for (var i = 0; i < imgDom.length; i++) {
            imgDom[i].className = "";
            liDom[i].className = "";
        }
        imgDom[count].className = "current";
        liDom[count].className = "current";
    }
    var count = 0;
    var timer =null;
    start();
    function start() {
        timer = setInterval(function () {
            count++;
            if (count >3) {
                count = 0;
            }
            fn(count);
        }, 3000)
    } */
    let left = document.querySelector(".left")
    let right = document.querySelector(".right")
    imgDom.forEach(function(dom,index){
                right.onclick = function(){
                    // 将当前划入的li标签设置active样式
                    /* document.querySelector('ul>.current').className = ''; */
                    if( document.querySelector('ul').lastElementChild.className=='current'){
                        document.querySelector('ul>.current').className = '';
                        document.querySelector('ul').firstElementChild.className = 'current';
                      
                    }else{
 document.querySelector('ul>.current').nextSibling.className = 'current';

                    document.querySelector('ul>.current').className = '';
                   
                    }
                   
                    if( document.querySelector('ol').lastElementChild.className=='current'){
                        document.querySelector('ol>.current').className = '';
                        document.querySelector('ol').firstElementChild.className = 'current';
                      
                    }else{

 document.querySelector('ol>.current').nextSibling.className = 'current';
           
                    document.querySelector('ol>.current').className = '';
                    }
                    
                   


                    // 此次没有在li标签上 设置属性保存li的序号 直接使用forEach 中的index表示需要 因为forEach 是新语法
                  
                }          
            })
            imgDom.forEach(function(dom,index){
                left.onclick = function(){
                    // 将当前划入的li标签设置active样式
                    /* document.querySelector('ul>.current').className = ''; */
                    if( document.querySelector('ul').firstElementChild.className=='current'){
                        document.querySelector('ul>.current').className = '';
                        document.querySelector('ul').lastElementChild.className = 'current';
                        
                    }else{
                       
 document.querySelector('ul>.current').previousSibling.className = 'current';
 document.querySelector('ul>.current').className = '';
                      
                   
                    }
                     
                    if( document.querySelector('ol').firstElementChild.className=='current'){
                        document.querySelector('ol>.current').className = '';
                        document.querySelector('ol').lastElementChild.className = 'current';    
                    }else{

 document.querySelector('ol>.current').previousSibling.className = 'current';
           
                    document.querySelector('ol>.current').className = '';
                    }}})

var box1 = document.querySelector(".box")
                    box1.mouseover=function(){
clearInterval(timer)

                    }




    /*
        实现功能
        1、自动切换图片 保证小圆点跟随
        2、上一张下一张点击切换图片  小圆点也需要跟随
        3、点击小圆点 切换到对应的图片
    */ 
   
</script>

</html>